<template>
	<view>
		<view class="full" @click="closeFull"></view>

		<view class="login-out">
			<view><b>筛选条件</b></view>
			<u-cell-group>
				<u-cell-item title="待办类型" :value="handleTypeName == '' ? '请选择' : handleTypeName"
					@click="show_picker = true;columns = handleType_options"></u-cell-item>
			</u-cell-group>

			<view class="clearfix"></view>
			<view class="btn"><button class="cancel-btn" @click="reset"><b>重置</b></button><button class="default-btn fr"
					@click="ok"><b>确定</b></button></view>
		</view>

		<view class="full full2" v-show="show_date || show_picker"></view>
		<u-select v-model="show_picker" :list="columns" label-name="text" @confirm="onConfirm" @cancel="cancel">
		</u-select>

	</view>
</template>

<script>
	export default {
		props: ['type'],
		data() {
			return {
				handleTypeName: '故障单待办',
				handleType_options: [{
					text: '故障单待办',
					value: 'Malfunction_Process_New',
					extra: 'status'
				}, {
					text: '故障维修单待办',
					value: 'Repair_Process',
					extra: 'status'
				}, {
					text: '延期处理待办',
					value: 'Block_Process',
					extra: 'status'
				}],
				columns: [],
				data_list: {
					processDefinitionKey: "Malfunction_Process_New",
				},
				show_picker: false,
				show_date: false
			}
		},
		created() {},
		methods: {
			closeFull() {
				this.$emit('closeFull');
			},
			reset() {
				this.handleTypeName = '故障单待办';
				this.data_list = {
					processDefinitionKey: "Malfunction_Process_New",
				};
			},
			cancel() {
				this.show_date = false;
				this.show_picker = false;
			},
			ok() {
				this.$emit('closeFull', this.data_list);
			},
			onConfirm(item) {
				if (item[0].extra == 'status') {
					this.handleTypeName = item[0].label;
					this.data_list.processDefinitionKey = item[0].value;
				}
				this.cancel();
			}
		}
	}
</script>

<style scoped>
	.login-out {
		padding: 26px 0 0 26px;
	}

	.login-out>view:nth-child(1) {
		margin-bottom: 16px;
	}

	.login-out>view:nth-child(2) {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.work-date {
		line-height: 50px;
		border-bottom: 1px solid #d7d7d7;
		color: #3E3A39;
		font-size: 14px;
		padding-right: 27px;
	}

	.work-date-icon {
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}

	.btn {
		position: absolute;
		width: 100%;
		bottom: 5%;
		left: 0;
		padding: 0 15px;
	}

	.default-btn,
	.cancel-btn {
		width: 47%;
		display: inline-block;
	}

	.full2 {
		z-index: 99;
	}

	.login-out>.status {
		line-height: 26px;
		border: 1px solid rgba(62, 58, 57, 0.4);
		padding: 0 13px;
		box-sizing: border-box;
		border-radius: 6px;
		margin-bottom: 16px;
		margin-right: 10px;
		font-size: 12px;
		position: relative;
		color: rgba(62, 58, 57, 0.7);
	}

	.login-out>.on {
		border: 1px solid #307BE0;
		color: #307BE0;
	}

	.login-out>.on::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: -2px;
		background: url('/static/img/alarm-lv.jpg') no-repeat;
		background-size: 100% 100%;
		width: 15px;
		height: 15px;
	}

	.van-cell {
		padding: 15px 16px;
	}

	.van-cell__value {
		color: #000000;
	}
</style>
